<template>
  <view>
    <view v-if="isExpired"
          class="m-1 bg-red-500 h-20 flex flex-col justify-center items-center rounded text-white font-bold text-xl">
      已 过 期
    </view>
    <view v-else
          class="m-1 bg-green-500 h-20 flex flex-col justify-center items-center rounded text-white font-bold text-xl">
      未 过 期
    </view>
    <view v-for="(item,index) in expiryList" :key="index">
      <uni-card>
        <view v-if="item.product" class="flex justify-center">
          <u-image @click="handlePreview(prefix+item.product.picture)" v-if="item.product.picture" :show-loading="true"
                   :src="prefix+item.product.picture"></u-image>
          <u-icon v-else size="60" class="w-14 h-14" name="photo" color="#2979ff"></u-icon>
        </view>
        <view class="text-xl text-black font-bold">{{ item.name }}</view>
        <view class=" text-gray-700">{{ item.barcode }}</view>
        <view>
          <text>生产日期：</text>
          <text class="text-gray-700">{{ item.productionDate }}</text>
        </view>
        <view>
          <text>保质期：</text>
          <text class="text-gray-700">{{ item.shelfLife }}天</text>
        </view>
        <view class="flex">
          <view>剩余保质期：</view>
          <view class="text-gray-700">
            <text v-if="MyDayjs(item.expiryDate).diff(MyDayjs(), 'days')===0">不足一天</text>
            <text v-else-if="MyDayjs(item.expiryDate).diff(MyDayjs(), 'days')<0">
              已过期{{ -MyDayjs(item.expiryDate).diff(MyDayjs(), 'days') }}天
            </text>
            <text v-else-if="!item.productionDate||!item.shelfLife">-</text>
            <text v-else>{{ MyDayjs(item.expiryDate).diff(MyDayjs(), 'days') }}天</text>
          </view>
        </view>
        <view v-if="item.product">
          <text>供应商：</text>
          <text class="text-gray-700">{{ item.product.supplierName }}</text>
        </view>
        <template #actions>
          <view class="flex justify-end py-1 space-x-1">
            <view>
              <u-button @click="handleDetail(item)" size="small">
                详情
              </u-button>
            </view>
            <view>
              <u-button @click="handleDo(item)" type="success" size="small">
                已处理
              </u-button>
            </view>
            <view>
              <u-button @click="handleUpdate(item)" type="primary" size="small">
                编辑
              </u-button>
            </view>
            <view>
              <u-button @click="handleRemove(item)" type="error" size="small">
                删除
              </u-button>
            </view>

          </view>
        </template>


      </uni-card>
    </view>
  </view>
</template>

<script setup lang="ts">

import MyDayjs from "@/utils/common/myDayjs";
import api from "@/api";
import {computed, onMounted} from "vue";
import {imagePathPrefix} from '/settings'
import {useProductStore} from "@/store/product";
import {storeToRefs} from "pinia";

const prefix = imagePathPrefix
const productStore = useProductStore()
const {expiryList, expiryTotal, selectedExpiry, editMode, supplierList, supplierTotal} = storeToRefs(productStore)


const props = defineProps({
  date: {
    type: String,
    default: MyDayjs().format('YYYY-MM-DD')
  },
  total: {
    type: Number,
    default: 0
  }
})
onMounted(() => {
  uni.setNavigationBarTitle({
    title: `${props.date}`
  })
  expiryList.value = []
  expiryTotal.value = 0
  getSupplierList()
  getList()
})


const getList = () => {
  api.expiry.queryList({
    pageNo: 1,
    pageSize: props.total,
    andParams: JSON.stringify({
      expiryDate: props.date
    })
  }).then((res: any) => {
    expiryList.value = expiryList.value.concat(res.data.data.records)
    expiryTotal.value = res.data.data.total
  })
}
const isExpired = computed(() => {
  return MyDayjs(props.date).diff(MyDayjs(), 'days') < 0
})

const handleUpdate = (item: IExpiry) => {
  selectedExpiry.value = item
  editMode.value = 'update'
  uni.navigateTo({
    url: `/pages/product/expiry/expiryEdit`
  })
}
const handleDetail = (item: IExpiry) => {
  api.product.queryByBarcode({
    barcode: item.barcode
  }).then((res: any) => {
    if (res.data.code === 0) {
      item.product = res.data.data
      item.product.supplierName = supplierList.value.find((supplier: ISupplier) => supplier.id === item.product.supplierId)?.name
    }
  })
}
const handleDo = (item: IExpiry) => {
  uni.showModal({
    title: '提示',
    content: '确定已处理了吗？',
    success: function (res) {
      if (res.confirm) {
        api.expiry.handleExpiryProduct({
          id: item.id
        }).then((res: any) => {
          if (res.data.code === 0) {
            selectedExpiry.value.expiryDate = ''
            selectedExpiry.value.productionDate = ''
            selectedExpiry.value.warningDate = ''

            item.productionDate = ''
            item.expiryDate = ''
            item.warningDate = ''
            uni.navigateBack({
              success() {
                uni.showToast({
                  title: '处理成功',
                  icon: 'success'
                })
              }
            })

          }
        })
      } else if (res.cancel) {
        console.log('用户点击取消');
      }
    }
  })

}
const handleRemove = (item: IExpiry) => {
  uni.showModal({
    title: '提示',
    content: '确定删除吗？',
    success: function (res) {
      if (res.confirm) {
        api.expiry.removeById({
          id: item.id
        }).then((res: any) => {
          if (res.data.code === 0) {
            uni.navigateBack({
              success() {
                uni.showToast({
                  title: '删除成功',
                  icon: 'success'
                })
              }
            })
          }
        })

      } else if (res.cancel) {
        console.log('用户点击取消');
      }
    }
  })
}
const handlePreview = (url: string) => {
  uni.previewImage({
    urls: [url],
    longPressActions: {
      itemList: ['发送给朋友', '保存图片', '收藏'],
      success: function (data) {
        console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
      },
      fail: function (err) {
        console.log(err.errMsg);
      }
    }
  });
}
const getSupplierList = () => {
  api.supplier.queryList({
    pageNo: 1,
    pageSize: 99,
  }).then((res: any) => {
    supplierList.value = supplierList.value.concat(res.data.data.records)
    supplierTotal.value = res.data.data.total
  })
}
</script>

<style scoped>

</style>